<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>助教主页</title>
    <!--  引入核心皮肤-->
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <!--   引入核心js-->
    <script src="../../layui/layui.js"></script>
    <script>
        layui.use(['layer', 'jquery', 'table', 'form'], function () {
            let layer = layui.layer;//定义组件
            let $ = layui.jquery;//定义组件
            let table = layui.table;//定义表格组件
            let form = layui.form;//定义表格组件
            table.render({
                elem: '#dg',
                url: '../../assist/selectOne',
                //page: true,//开启分页
                parseData: function (res) {
                    console.log(res)
                    return {
                        "code": 0
                        , "msg": ""
                        , "data": [res]
                    }
                },
                cols: [[ //表头
                    {type: 'checkbox'}
                    , {field: 'assid', title: '助教ID'}
                    , {field: 'assname', title: '助教姓名'}
                    , {field: 'instutite', title: '学院'}
                    , {field: 'tel', title: '电话'}
                    , {field: 'email', title: '邮箱'}
                    , {field: 'teaid', title: '教师ID'}
                    , {field: 'collegeid', title: '学院ID'}
                ]]
            })
            $("#btn-edit").click(function () {
                let array=table.checkStatus('dg').data;
                //弹出修改对话框
                if(array.length==0){
                    layer.msg('请选择要修改的数据');
                }else {
                    layer.open({
                        title: '修改个人信息',
                        type: 1,
                        content: $("#edit-dialog").html(),
                        area: ['500px']
                    })
                    //填充修改表单
                    form.val('load-edit-form-data', {
                        assname: array[0].assname,
                        instutite: array[0].instutite,
                        tel: array[0].tel,
                        email: array[0].email,
                        teaid: array[0].teaid,
                        collegeid: array[0].collegeid,
                        assid: array[0].assid,
                    })

                    form.render();//重新渲染表单组件，组件就可以显示页面中
                    //在此编写ajax代码，请求后端进行修改操作
                    form.on('submit(edit-form-submit)', function (data) {
                        $.post('../../assist/updateOne', data.field, function (flag) {
                            if (flag) {
                                layer.msg('修改数据成功', {icon: 6});
                                layer.closeAll('page');
                                table.reload('dg');
                            } else {
                                layer.msg('修改数据失败', {icon: 6});
                            }
                        })

                        return false;//阻住提交表单标签action属性值

                    })
                }
            })
        })
    </script>
    <script id="edit-dialog" type="text/html">
        <form  class="layui-form" id="edit-form" lay-filter="load-edit-form-data">
            <div class="layui-form-item">
                <input type="text" name="assname" required  lay-verify="required"
                       placeholder="请输入助教姓名" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="instutite" required  lay-verify="required"
                       placeholder="请输入学院" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="tel" required  lay-verify="required"
                       placeholder="请输入电话" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="email" required  lay-verify="required"
                       placeholder="请输入E-mail" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="teaid" required  lay-verify="required"
                       placeholder="请输入教师编号" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="collegeid" required  lay-verify="required"
                       placeholder="请输入学院编号" class="layui-input">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn"  lay-submit lay-filter="edit-form-submit">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </script>
</head>
<body>
<div class="demoTable">
    <button class="layui-btn layui-btn-warm" id="btn-edit"><i class="layui-icon">&#xe642;</i>修改个人信息</button>
</div>
<table id="dg"></table>
</body>
</html>